<html>

<head>
  <title>安装shortUrl</title>
  <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
  <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="/static/nprogress/nprogress.css">
  <link rel="stylesheet" href="all-a.css">
</head>
<style>
  body{
    background: url('https://www.toptal.com/designers/subtlepatterns/patterns/y-so-serious-white.png');
  }
  .text-center{
    text-align: center;
  }
  .beauty-mdui {
    padding-right: 5%;
    padding-left: 5%;
  }
</style>

<body>
  <div id="install-layer">
    <br><br>
    <div class="text-center">
      <h1>安装</h1>
    </div>
    <div class="beauty-mdui">
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">网站名</label>
        <input class="mdui-textfield-input" type="text" id="site_name" placeholder="请填写网站名" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">网站地址</label>
        <input class="mdui-textfield-input" type="text" id="site_addr"  placeholder="请填写网址"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库地址（暂时只支持MySQL）</label>
        <input class="mdui-textfield-input" type="text" id="sql_addr" placeholder="请填写数据库地址，默认 127.0.0.1" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库用户名</label>
        <input class="mdui-textfield-input" type="text" id="sql_user" placeholder="请填写数据库用户名"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库密码</label>
        <input class="mdui-textfield-input" type="password" id="sql_password" placeholder="请填写数据库密码"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">数据库名</label>
        <input class="mdui-textfield-input" type="text" id="sql_name" placeholder="请填写数据库名" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">后台管理主账户(暂未启用)</label>
        <input class="mdui-textfield-input" type="text" id="back_user" placeholder="请设置后台管理账号"/>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">后台管理密码</label>
        <input class="mdui-textfield-input" type="password" id="back_pass" placeholder="请设置后台管理密码" />
      </div>
      <br>
      <div class="text-center">
        <button class="mdui-btn mdui-btn-raised mdui-ripple" onclick="go_install();">安装</button>
      </div>
      
      <br>
    </div>
  </div>
</body>
<script src="/static/nprogress/nprogress.js"></script>
<script src="/static/jquery/dist/jquery.js"></script>
<script src="/static/jquery-pjax/jquery.pjax.js"></script>

<script>
  $(document).on('pjax:start', function () { NProgress.start(); });
  $(document).on('pjax:end', function () { NProgress.done(); });
  function go_install() {
    var site_addr = $("#site_addr").val()
    var site_name = $("#site_name").val()
    var sql_addr = $("#sql_addr").val() || "127.0.0.1"
    var sql_user = $("#sql_user").val()
    var sql_password = $("#sql_password").val()
    var sql_name = $("#sql_name").val()
    var admin_user = $("#back_user").val()
    var admin_password = $("#back_pass").val()
    $.pjax({
      url: "./install_go.php",
      type: "post",
      data: {
        "site_addr": site_addr,
        "sql_addr": sql_addr,
        "sql_user": sql_user,
        "sql_password": sql_password,
        "sql_name": sql_name,
        "admin_user": admin_user,
        "admin_password": admin_password,
        "site_name": site_name
      },
      container: "#install-layer",

    })
    console.log(site_addr)
  }
</script>

</html>